<template>
  <div class="info-box">
    <div>
      <div class="change-div">
        <div
          @click="activeBtn(index)"
          :class="{ 'active-class': thatindex == index }"
          v-for="(item, index) in companyList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div v-if="showcompany">
        <div class="company-box">
          <div class="company-div">
            <div>企业全称：{{ infoDetails.enterprise.enterpriseDetail.name }}</div>
            <div>{{!infoDetails.enterprise.enterpriseDetail.perfect ? "待完善" : "已完善"}}</div>
          </div>
          <div class="company-div">
            <div>企业性质：{{ infoDetails.enterprise.enterpriseDetail.enterpriseNature }}</div>
          </div>
          <div class="company-div">
            <div>企业地区：{{ infoDetails.enterprise.enterpriseDetail.province }}/{{infoDetails.enterprise.enterpriseDetail.city}}/{{infoDetails.enterprise.enterpriseDetail.area}}</div>
          </div>
        </div>
        <div class="company2-box">
          <div>本年度销售收入：{{ infoDetails.enterprise.enterpriseDetail.currentYearRevenueValue }}</div>
          <div>上年度销售收入：{{ infoDetails.enterprise.enterpriseDetail.lastYearRevenueValue }}</div>
          <div>本年度开票收入：{{ infoDetails.enterprise.enterpriseDetail.lastYearInvoiceAmount }}</div>
          <div>是否有不动产：{{ infoDetails.enterprise.enterpriseDetail.hasRealEstate ? "是" : "否" }}</div>
          <div v-if="infoDetails.enterprise.enterpriseDetail.hasRealEstate">
            <button>不动产评估值{{ infoDetails.enterprise.enterpriseDetail.realEstateValString }}</button>
          </div>
          <div>是否有设备：{{ infoDetails.enterprise.enterpriseDetail.hasEquipment ? "是" : "否"  }}</div>
          <div v-if="infoDetails.enterprise.enterpriseDetail.hasEquipment">
            <button>设备价值{{ infoDetails.enterprise.enterpriseDetail.equipmentValString }}</button>
          </div>
          <div>是否有专利：{{ infoDetails.enterprise.enterpriseDetail.hasPatent  ? "是" : "否" }}</div>
          <div v-if="infoDetails.enterprise.enterpriseDetail.hasPatent">
            <button>专利个数{{ infoDetails.enterprise.enterpriseDetail.patentVal }}</button>
          </div>
          <div>是否有股权质押：{{infoDetails.enterprise.enterpriseDetail.hasSharePledge  ? "是" : "否" }}</div>
        </div>
      </div>
      <div v-if="showlegal">
        <!-- 法人信息 -->
        <div class="company-box">
          <div class="company-div">
            <div>法人姓名：{{ infoDetails.enterprise.legalRepresentative.name }}</div>
            <div>{{infoDetails.enterprise.legalRepresentative.perfect ? "已完善" : "待完善"}}</div>
          </div>
          <div class="company-div">
            <div>法人年龄：{{ infoDetails.enterprise.legalRepresentative.age }}</div>
          </div>
          <div class="company-div">
            <div>法人身份证：</div>
          </div>
          <div class="legal-div" v-if="passport1 || passport2">
            <img :src="'data:image/png;base64,' + passport1 " alt="">
            <img :src="'data:image/png;base64,' + passport2" alt="">
          </div>
          <div class="legal-div" v-else>
            <p>暂无图片</p>
            <p>暂无图片</p>
          </div>
        </div>
      </div>
      <div v-if="showmoney">
        <!-- 财务账户 -->
        <div class="company-box">
          <div class="company-div">
            <div>收款账户：{{ infoDetails.enterprise.financial.bankName ? infoDetails.enterprise.financial.bankName : '' }}</div>
            <div>{{ infoDetails.enterprise.financial.perfect ? "已完善" : "待完善"}}</div>
          </div>
          <div class="company-div">
            <div>开户企业：{{ infoDetails.enterprise.financial.name ? infoDetails.enterprise.financial.name : '' }}</div>
          </div>
          <div class="company-div">
            <div>账号：{{ infoDetails.enterprise.financial.cardNum ? infoDetails.enterprise.financial.cardNum : '' }}</div>
          </div>
          <div class="company-div">
            <div>开户地区：{{ infoDetails.enterprise.financial.province ? infoDetails.enterprise.financial.province : '' }}/{{infoDetails.enterprise.financial.city ? infoDetails.enterprise.financial.city : ''}}/{{infoDetails.enterprise.financial.area ? infoDetails.enterprise.financial.area : ''}}</div>
          </div>
          <div class="company-div">
            <div>开户支行：{{ infoDetails.enterprise.financial.depositBank ? infoDetails.enterprise.financial.depositBank : '' }}</div>
          </div>
        </div>
      </div>
      <div v-if="showpay">
          <div class="company-box">
              <div class="company-div">
                <div>营业执照：</div>
                <div>{{infoDetails.enterprise.qualification.perfect ? "已完善" : "待完善"}}</div>
                </div>
                <div class="img-div" v-if="yyzz"><img :src="'data:image/png;base64,' + yyzz" alt=""></div>
                <div class="img-div" v-else><p>暂无图片</p></div>
          </div>
          <div class="company2-box mt10">
             <div>税务登记号：{{infoDetails.enterprise.qualification.taxNum ? infoDetails.enterprise.qualification.taxNum : ''}}</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import imgBaseUrl from "utils/imgBaseUrl"
import { getImage } from "api/User"
export default {
  props: {
    infoDetails: {
      required: true,
      type: Object,
    },
  },
  data() {
    return {
      baseUrl: imgBaseUrl,
      passport1:"",
      passport2: '',
      yyzz: '',
      companyList: ["企业信息", "法人信息", "财务账户", "企业资质"],
      thatindex: 0,
      showcompany: false,
      showlegal: false,
      showmoney: false,
      showpay: false,
      companyObj: {
        name: "11111",
        type: "22222",
        area: "雨花区",
        onyear: "3年限",
        outtype: "互联网",
        status: 0,
      },
      companyObj2: {
        thatyear: "200-1000",
        lastyear: "200-1000",
        thatyear1: "200-1000",
        ishave1: "是",
        ishave2: "否",
        ishave3: "是",
        ishave4: "否",
        info: "不动产评估值1000万以内",
      },
      legalObj: {
        name: "干粉",
        age: "20-60",
        url1: "",
        url2: "",
      },
      moneyObj:{
          name:'11',
          company:'22',
          number:'33',
          area:'44',
          type:'55',
      }
    };
  },
  mounted() {
    this.showcompany = true;
    this.$nextTick(_ => {
      this.getImages();
    })
  },
  methods: {
    getImages() {
      getImage({enterpriseId: this.infoDetails.enterprise.enterpriseDetail.id, type: 1}).then(res => {
        this.passport1 = res.data;
      })
      getImage({enterpriseId: this.infoDetails.enterprise.enterpriseDetail.id, type: 2}).then(res => {
        this.passport2 = res.data;
      })
      getImage({enterpriseId: this.infoDetails.enterprise.enterpriseDetail.id, type: 3}).then(res => {
        this.yyzz = res.data;
      })
    },
    activeBtn(index) {
      this.thatindex = index;
      if (index == 0) {
        this.showcompany = true;
      } else {
        this.showcompany = false;
      }
      if (index == 1) {
        this.showlegal = true;
      } else {
        this.showlegal = false;
      }
      if (index == 2) {
        this.showmoney = true;
      } else {
        this.showmoney = false;
      }
      if (index == 3) {
        this.showpay = true;
      } else {
        this.showpay = false;
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
@import './../../../assets/styl/mixin.styl'
.red
    color #FF4D4F
.info-box
    background #F5F5F5
    // margin rem(25) rem(15)
.change-div
  padding rem(25) rem(15)
  background #FFFFFF
  margin-top rem($m15)
  display flex
  font-size rem($ft16)
  color #999999
  text-align left
  width 109%
  margin 0 auto
  div
    width rem(94)
    height rem(16)
    font-weight bold
  .active-class
    color $baseColor
    :after
      display block
      content url('./../../../assets/image/active-class.png')
.company-box
    padding 0 rem(15) rem(10) rem(15) 
    margin-top rem(10)
    display flex
    flex-direction column
    font-size rem(15)
    background #FFFFFF
    .img-div
        margin-top rem(10)
        width rem(345)
        height rem(215)
        p
          width 100%
          height 100%
          line-height rem(215)
          text-align center
          border 1px solid #ccc
          color #ccc
        img 
            height 100%
            width 100%
            object-fit cover
    .company-div
        display flex
        justify-content space-between
        color #999
        div
            margin-top rem(20)
        :first-child
            color #333
    .legal-div
        display flex
        justify-content space-between
        margin-top rem(10)
        img
          width rem(167.5)
          height rem(127)
          object-fit cover
        p
          border rem(1) solid #ccc
          text-align center
          width rem(167.5)
          line-height rem(127)
          color #ccc
.company2-box
    padding rem(25) rem(15)
    display flex
    flex-direction column
    color #333
    font-size rem(15)
    padding rem(20) 0
    background #FFFFFF
    div
        margin rem(10) 0
        padding 0 rem(15)
    button
        width rem(345)
        height rem(46)
        background #FAFAFA
        color #2F54EB
        border-radius rem(5)
        font-weight bold
</style>
